<template>
	<div id="other" ref="threeContainer" @click="handleClick"></div>
	<my-table :table-data="tableData" @close="close" v-if="show" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import myTable from './MyTable.vue'

const threeContainer = ref(null);
const show = ref(false);
const tableData = ref({})
let scene, camera, renderer, mixer, model, raycaster, mouse;

onMounted(() => {
	initThree(threeContainer.value);
});

function initThree(container) {
	// 创建场景
	scene = new THREE.Scene();

	// 创建相机
	camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
	camera.position.set(0, 0, 0);

	// 创建渲染器
	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setSize(container.clientWidth, container.clientHeight);
	container.appendChild(renderer.domElement);

	// 创建轨道控制
	const controls = new OrbitControls(camera, renderer.domElement);
	controls.update();

  // 添加坐标辅助器
  const axesHelper = new THREE.AxesHelper(5)
  scene.add(axesHelper);

	// 初始化Raycaster和鼠标位置
	raycaster = new THREE.Raycaster();
	mouse = new THREE.Vector2();

	// 加载模型
	const loader = new GLTFLoader();
	loader.load(
		'models/daqiao.glb', // 替换为你的模型路径
		(gltf) => {
			model = gltf.scene;
			scene.add(model);

			// 获取动画剪辑
			const animations = gltf.animations;

			// 创建动画混合器
			mixer = new THREE.AnimationMixer(model);

			// 播放动画
			animations.forEach((clip) => {
				const action = mixer.clipAction(clip);
				action.play();
			});


			// 渲染循环
			function animate() {
				requestAnimationFrame(animate);

				// 更新动画混合器
				if (mixer) {
					mixer.update(1 / 60); // 60 FPS
				}

				controls.update();
				renderer.render(scene, camera);
			}

			animate();
		},
		(xhr) => {
			console.log(xhr)
			console.log((xhr.loaded / xhr.total * 100) + '% loaded');
		},
		(error) => {
			console.error('An error happened', error);
		}
	);

	// 添加环境光
	const ambientLight = new THREE.AmbientLight(0xffffff);
	scene.add(ambientLight);

	// 添加方向光
	const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
	directionalLight.position.set(0, 0, 0).normalize();
	scene.add(directionalLight);

	// 监听窗口大小变化
	window.addEventListener('resize', () => {
		camera.aspect = container.clientWidth / container.clientHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(container.clientWidth, container.clientHeight);
	});
}

// 点击事件处理函数
function handleClick(event) {
	show.value = false
	// 计算鼠标位置
	mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
	mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

	// 更新Raycaster
	raycaster.setFromCamera(mouse, camera);

	// 检测点击的对象
	const intersects = raycaster.intersectObjects(scene.children, true);

	if (intersects.length > 0) {
		const intersectedObject = intersects[0].object;
		console.log('Clicked on object:', intersectedObject);
		console.log({
			x: event.clientX,
			y: event.clientY
		})
		// if ((event.clientX > 1300 && event.clientX < 1500) && (event.clientY > 300 && event.clientY < 400)) {
		if (intersectedObject.name  === 'Obj3d66_35') {
			tableData.value = {
				x: event.clientX,
				y: event.clientY
			}
			show.value = true
		}

		// 你可以在这里添加更多的逻辑，例如改变模型的状态或触发其他操作
	}
}
function close() {
	show.value = false
}

</script>

<style scoped>
	#other {
		width: 100%;
		height: 100%;
	}
</style>
